<template>
  <div class="content">
    <div class="gldwDiv">
      <TitleVue :name="'管理单位'" />
      <div class="gldwContent">
        <Title2Vue :name="'管理单位信息'" />
        <div class="contents1">
          <p>· 管理单位性质：{{ dwxz }}</p>
          <p>· 归口管理单位部门：{{ dwbm }}</p>
          <p>· 管理名称：{{ glbm }}</p>
        </div>
        <div class="contents2">
          <div class="itemDiv">
            <img src="@/assets/img/common/headerPictue.png" alt="" />
            <div class="rightDiv">
              <p>单位负责人</p>
              <p>{{ dwfzr }}</p>
            </div>
          </div>
          <div class="itemDiv">
            <img src="@/assets/img/common/headerPictue.png" alt="" />
            <div class="rightDiv">
              <p>技术负责人</p>
              <p>{{ jsfzr }}</p>
            </div>
          </div>
        </div>
        <Title2Vue :name="'汛期联系电话'" />
        <div class="lxdhDiv">
          <span class="itemSpan" v-for="(item, index) in xqlxdh.split('')" :key="index">
            {{ item }}
          </span>
        </div>
      </div>
    </div>

    <div class="gltzDiv">
      <TitleVue :name="'管理体制'" />
      <div class="gltzContent">
        <div class="itemDiv" v-for="(item, index) in gltzData" :key="index">
          <Progress :title="item.name + '' + item.val + '人'" :name="item.name" :percentage="(item.val / gltzTotal) * 100" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import Title2Vue from '../common/title2Vue.vue'
import Progress from '../common/progressVue.vue'
export default {
  name: 'TzLeft',
  components: {
    TitleVue,
    Title2Vue,
    Progress
  },
  data() {
    return {
      dwxz: '自收自支事业单位',
      dwbm: '水务局',
      glbm: '寿阳县水库事务服务中心',
      dwfzr: '王某某',
      jsfzr: '张某某',
      xqlxdh: '13111111111',
      gltzData: [
        {
          name: '计财组',
          val: 60
        },
        {
          name: '水文组',
          val: 90
        },
        {
          name: '运需科',
          val: 22
        },
        {
          name: '防汛指导小组',
          val: 40
        },
        {
          name: '水工组',
          val: 30
        },
        {
          name: '公司办',
          val: 10
        },
        {
          name: '安保反恐小组',
          val: 70
        },
        {
          name: '监测运维组',
          val: 10
        },
        {
          name: '工会小组',
          val: 10
        },
        {
          name: '工作小组',
          val: 12
        },
        {
          name: '网络安全领导小组',
          val: 30
        },
        {
          name: '站班子',
          val: 50
        },
        {
          name: '维修组',
          val: 20
        },
        {
          name: '安全生产领导小组',
          val: 5
        },
        {
          name: '运行组',
          val: 40
        },
        {
          name: '工程科',
          val: 20
        },
        {
          name: '综合科',
          val: 20
        }
      ],
      gltzTotal: 0
    }
  },
  mounted() {
    var total = 0
    this.gltzData.forEach((item, index) => {
      if (item.val > total) {
        total = item.val
      }
    })
    this.gltzTotal = total
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .gldwDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;

    .gldwContent {
      padding: 1vh 1.2vw;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .contents1 {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.7vh;
        color: #c5d1df;
        padding: 1vh 0 1vh 2.5vh;
        box-sizing: border-box;
      }
      .contents2 {
        display: flex;
        padding: 0 2vh 1.5vh 1vh;
        justify-content: space-between;
        .itemDiv {
          display: flex;
          .rightDiv {
            display: flex;
            flex-direction: column;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 1.7vh;
            color: #ffffff;
            margin-left: 5px;
            p:nth-child(2) {
              padding: 5px;
              box-sizing: border-box;
              background: linear-gradient(to right, #0565a7, transparent);
            }
          }
        }
      }
      .lxdhDiv {
        display: flex;
        padding: 0.5vh 1vh;
        box-sizing: border-box;
        .itemSpan {
          width: 8%;
          background: url('@/assets/img/common/numberBg.png') no-repeat;
          background-size: 120% 150%;
          background-position: center;
          font-family: DS-Digital;
          font-weight: 400;
          font-size: 4vh;
          color: #ffffff;
        }
        .itemSpan:nth-child(3),
        .itemSpan:nth-child(7) {
          margin-right: 1vh;
        }
      }
    }
  }

  .gltzDiv {
    flex: 1;
    overflow: hidden;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    display: flex;
    flex-direction: column;
    .gltzContent::-webkit-scrollbar {
      display: none;
    }
    .gltzContent {
      padding: 1vh 1.2vw;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      .itemDiv {
        width: 100%;
        margin-bottom: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>
